<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>rem</title>
	<script type="text/javascript">
		     let pageWidth = window.innerWidth
		     document.write(`<style>html{font-size:${pageWidth/10}px;}</style>`)
	</script>
</head>
<body>
	<div></div>
</body>
<style type="text/css">
*{
	margin:0;
	padding:0;
}
/* html {
    font-size : 20px;
}
@media only screen and (min-width: 375px){
    html {
        font-size: 22.5px !important;
    }
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
} */
	
	div{
		width:3rem;
		height:1rem;
		font-size:1rem;
		background:red;
	}
	
	
</style>


</html>

